<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">  
    <meta name="format-detection" content="telephone=no" />  
    <meta name="apple-mobile-web-app-capable" content="yes" />  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">   
    
    <title>注册</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/register.css">
</head>
<body class="body1">
   <div class="login-form">
       <div class="login-items">
            <div><h2>用户注册</h2></div>
            <form action="">
                <div class="login-form-center">
                    <div class="form-input">
                        <label ><input type="text"  name="uname" placeholder="请输入用户名">
                        <span class="msg"></span>
                    </div>
                    <div class="form-input">
                        <input type="password"  name="password" id="password" placeholder="请输入6到8位密码">
                        <span class="msg"></span>
                    </div>
                    <div class="form-input">
                        <input type="password"  name="confirm" id="password1" placeholder="请再次输入密码">
                        <span class="msg"></span>
                    </div>
                    <div class="form-input">
                        <button type="submit" name="regist">注册</button>
                        <button type="reset" name="refill">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
          // 6到8位的密码（数字 字母 下划线）所对应的正则表达式
          var reg = /^\w{6,8}$/;
          //代表前后密码是否一致!!  如果为false代表不一致  如果为true代表一致 默认为false
          var confirmFlag =  false;

          // 获取密码
          var password = document.querySelector("#password")
          var confirm = document.querySelector('[id=password1]')
          //addEventListener ： 添加事件
          //change事件 : 一般给input元素使用, 当input输入框中的内容产生改变时 并且光标离开输入框时触发
          password.addEventListener('change',verifyConfirm)
          confirm.addEventListener('change',verifyConfirm)
          function verifyConfirm(){
              //nextElementSibling : 找下一个兄弟节点
              const span = confirm.nextElementSibling
              //value：拿输入框的值！！！
              if (confirm.value != password.value){
                  //innerHTML : 将span的内部元素替换为指定的内容
                  span.innerHTML = '两次密码输入不一致'
                  confirmFlag = false;
                  return;
              }

              //两次密码输入一致
              span.innerHTML = ''
              confirmFlag = true;
          }


          //获取注册按钮
          var regist = document.querySelector("[name=regist]");
          regist.addEventListener("click",(event)=>{
            //阻止事件的默认行为!!!（默认行为:自动提交表单）
            //event:事件对象
            event.preventDefault()

            //获取用户名
            var uname = document.querySelector("[name=uname]").value;

            //跳转到登录页（前端限制: 前后密码得一致 并且 用户名不能为空  并且 密码格式得正确）
            //跳转到登录页（后端限制: 注册操作得成功!!!!）
            if(confirmFlag === true && uname!=="" && reg.test(password.value)){
                //发ajax请求!!! 进行注册操作
                var xhr = new XMLHttpRequest();
                xhr.addEventListener("load", function () {
                    //请求完成
                    var res = JSON.parse(this.responseText)
                    if(res.data === "error"){
                        //注册操作失败 提醒一下用户
                        alert(res.message)
                    }else{
                        // 注册操作得成功!!!! 才能跳转到登录页
                        window.location.href = "./index.html"
                    }
                });
                xhr.open("POST", "http://127.0.0.1:8080/api/users/register");
                xhr.send(JSON.stringify({
                    username:uname,
                    password:password.value
                }));
            }else{
                alert("填写有误")
            }
          })
    </script>
</body>
</html>